import SearchComponent from "../../../Search"
import Portal from '@mui/material/Portal'
import { useState } from "react";
import useClientDocument from "@/hooks/useClientDocument";

const NavSearch: React.FC = () => {
  const [open, setOpen] = useState(false);

  // fix ssr mode error: document not defined
  const doc = useClientDocument()

  return (
    <>
      <Portal container={doc?.body}>
        {/* make portal always use current document body instead old document in astro mpa!! */}
        <SearchComponent open={open} handleClose={() => setOpen(false)} />
      </Portal>
      <div className="flex flex-col justify-center text-sm w-[200px] pr-4 opacity-75 hover:opacity-100 transition cursor-pointer" onClick={() => setOpen(true)}>
        <div className="flex my-1 items-center justify-between p-3 border-[1px] rounded-full h-8">
          <span>营业妨碍，创意破产</span>
          <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" width="16" height="16"><path d="M945.066667 898.133333l-189.866667-189.866666c55.466667-64 87.466667-149.333333 87.466667-241.066667 0-204.8-168.533333-373.333333-373.333334-373.333333S96 264.533333 96 469.333333 264.533333 842.666667 469.333333 842.666667c91.733333 0 174.933333-34.133333 241.066667-87.466667l189.866667 189.866667c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c8.533333-12.8 8.533333-34.133333-2.133333-46.933334zM469.333333 778.666667C298.666667 778.666667 160 640 160 469.333333S298.666667 160 469.333333 160 778.666667 298.666667 778.666667 469.333333 640 778.666667 469.333333 778.666667z" fill="#ffffff" data-darkreader-inline-fill=""></path></svg>
        </div>
      </div>
    </>
  )
}

export default NavSearch